<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameBoy 俄罗斯方块</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="gameboy">
        <div class="worn-edges"></div>
        <div class="gameboy-top">
            <div class="power-light"></div>
            <span class="logo">Nintendo GAME BOY</span>
        </div>
        <div class="gameboy-body">
            <div class="screen-area">
                <div class="screen-border">
                    <div class="screen">
                        <canvas id="gameCanvas" width="160" height="144"></canvas>
                        <div id="gameOverlay" class="hidden">
                            <span id="overlayText"></span>
                        </div>
                    </div>
                </div>
                <div class="nintendo-text">Nintendo</div>
            </div>

            <div class="controls">
                <div class="d-pad">
                    <button id="btnUp" class="d-pad-btn up">▲</button>
                    <button id="btnLeft" class="d-pad-btn left">◀</button>
                    <button id="btnRight" class="d-pad-btn right">▶</button>
                    <button id="btnDown" class="d-pad-btn down">▼</button>
                    <div class="d-pad-center"></div>
                </div>

                <div class="action-buttons">
                    <button id="btnA" class="action-btn a">A</button>
                    <button id="btnB" class="action-btn b">B</button>
                </div>
            </div>


        </div>
        <div class="menu-buttons">
            <button id="btnSelect" class="menu-btn select">SELECT</button>
            <button id="btnStart" class="menu-btn start">START</button>
        </div>
    </div>

    <!-- 将分数显示移到游戏机外部 -->
    <div class="score-display">
        <div>分数: <span id="score">0</span></div>
        <div>等级: <span id="level">1</span></div>
    </div>

    <div class="instructions">
        <h3>操作说明:</h3>
        <p>← → : 左右移动</p>
        <p>↓ : 加速下落</p>
        <p>A : 旋转</p>
        <p>B : 硬降（直接落到底部）</p>
        <p>START : 暂停/继续</p>
        <p>SELECT : 重新开始</p>
    </div>

    <script src="scripts/block.js"></script>
    <script src="scripts/gameBoard.js"></script>
    <script src="scripts/renderer.js"></script>
    <script src="scripts/game.js"></script>
</body>

</html>